import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Rectangle {
    id: titleBar
    anchors.top: parent.top
    anchors.left: navBar.right
    anchors.right: parent.right
    implicitHeight: 86
    color: '#080D16'

    RowLayout {
        anchors.fill: parent
        anchors.leftMargin: 14
        spacing: 0

        Rectangle {
            Layout.preferredWidth: 600
            Layout.preferredHeight: 50
            Layout.alignment: Qt.AlignVCenter
            Layout.rightMargin: 20
            color: '#1A1F31'
            radius: 10

            Image {
                id: searchIcon
                anchors.left: parent.left
                anchors.leftMargin: 26
                anchors.verticalCenter: parent.verticalCenter
                width: 19
                height: 19
                source: './resources/images/search.png'
            }

            TextField {
                anchors.left: searchIcon.right
                anchors.right: parent.right
                anchors.top: parent.top
                height: parent.height
                placeholderText: qsTr('Search')
                placeholderTextColor: '#5B6783'
                background: Item {}
                color: 'white'
                font.pixelSize: 16
                leftPadding: 16
                rightPadding: 16
            }
        }

        Item {
            Layout.fillWidth: true
        }

        Image {
            Layout.preferredWidth: 17
            Layout.preferredHeight: 21
            Layout.alignment: Qt.AlignVCenter
            Layout.rightMargin: 30
            source: './resources/images/message.png'

            Rectangle {
                anchors.centerIn: parent
                anchors.horizontalCenterOffset: 10
                anchors.verticalCenterOffset: -10
                width: 20
                height: 20
                color: '#E21E50'
                radius: 10
                clip: true

                Text {
                    anchors.centerIn: parent
                    font.pixelSize: 12
                    color: '#F4F7F6'
                    text: '3'
                }
            }
        }

        Image {
            Layout.preferredWidth: 36
            Layout.preferredHeight: 36
            Layout.alignment: Qt.AlignVCenter
            Layout.rightMargin: 30
            source: './resources/images/user_avatar.png'
        }

        Image {
            Layout.preferredWidth: 24
            Layout.preferredHeight: 24
            Layout.alignment: Qt.AlignVCenter
            Layout.rightMargin: 20
            source: './resources/images/theme_dark.png'
        }
    }
}
